<template>
    <view class="body flex_wrap">
		<view class="navbar w100" style="position: fixed;top: 0;">
			<view style="height: 35px;" class="w100"></view>
			<view style="height: 30px;color: #fff;font-size: 18px;color: #fff;" 
			class="flex flex_ac flex_jc w100">奥特转盘</view>
		</view>
		
		<view class="back" @click.stop="back()">
			<view class="backzhezhao"></view>
			<image src="../../static/images/back3.png"></image>
		</view>
		
		<view  class="w100 flex flex_wrap flex_jc" style="margin-top: 75px;">
			<view class="share_box flex flex_jc">
				<button open-type="share" class="share flex flex_jc flex_ac">
					<u-icon color="#fff" size="70rpx" name="share-square"></u-icon>
					<view class="ml10 sharetxt">点击分享给朋友一起玩</view>
				</button>
			</view>
			
			<view class="award w100 txt_c">{{zhuanpan_word}}</view>
			<view class="container">
				<view @click.stop="play()" class="spinBtn">go</view>
				<view class="wheel" 
					:style="{transform:'rotate('+runDeg+'deg)',transition:wtransition}">
					<view style="width: 100%;height: 100%;"
						:style="{transform:'rotate('+jiaodu/2+'deg)'}">
						<view
							v-for="(item,index) in list" 
							class="number" 
							:style="[{transform:'rotate('+item.turn+')'
							,backgroundColor:item.bgcolor
							,clipPath:item.clip
							}]">
							<view 
							class="word"
							:class="item.dim?'dim word'+index:'word'+index"
							:id="index"
							:style="[{transform:'rotate(-'+jiaodu/2+'deg)'
							}]"
							>{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="w100 flex flex_jc" v-if="show_ad">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white"  v-if="show_ad"></ad>
		</view>
		
	</view> 
</template>
<script>
import {playSound} from "@/utils/common.js"
import zhuanpan from '@/utils/zhuanpan.js';
    export default {  
        data() {  
            return {
				runDeg:0,
				jiaodu:0,
				zhuanpan_word:'??',
				top_word:0,
				timer:null,
				is_run:false,
				duration:5,
				wtransition:'',
				setting_window_show:false,
				is_vibrate:false,
				is_voice:true,
				record_list:[],
				list:[],
				zhuanpan:[],
				name:'',
				show:true,
				is_moren:false,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				
            };  
        },  
		
		
		onShareAppMessage(e) {
			return {
				path: '/pages/zhuanpan/index?zhuanpan='+JSON.stringify(this.zhuanpan),
			}
		},
		onShareTimeline(e) {
			return {
				path: '/pages/zhuanpan/index?zhuanpan='+JSON.stringify(this.zhuanpan),
			}
		},
		
        onLoad:function(option){
			if(option.zhuanpan){
				this.zhuanpan = JSON.parse(option.zhuanpan)
			}else{
				//如果有保存到有在使用的转盘，就用那个转盘，再不然就从js里面拿
				if(uni.getStorageSync('current_zhuanpan')){
					this.zhuanpan = uni.getStorageSync('current_zhuanpan')
				}else{
					this.zhuanpan = zhuanpan.zhuanpan_list[0]
				}
			}
			this.list = this.zhuanpan.list
			console.log(this.list)
			this.name = this.zhuanpan.name
			
			this.init()
        },  
        onReady: function (e) {  
			this.drawAwardRoundel()
			this.morenChange(true,true)
        },  
        methods: {
			
			showTool() {
				this.show = !this.show
			},
			
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					console.log('back1')
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					console.log('back2')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				} else if(pages.length > 1) {
					console.log('back3')
					uni.navigateBack({
						delta: 1
					});
				}else{
					console.log('back4')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				}
			},
			
			init(){
				//获取转盘记录为后续转盘后，添加记录
				if(uni.getStorageSync('zhuanpan_history_list')){
					this.record_list = uni.getStorageSync('zhuanpan_history_list')
				}
				//定义转盘时间
				this.wtransition = 'transform '+this.duration+'s ease'
			},
			
			zhuanpan_edit(){
				uni.navigateTo({
					url: '/pages/zhuanpan_edit/index?zhuanpan='+JSON.stringify(this.zhuanpan)
				}); 
			},
			vibrateChange(e){
				this.is_vibrate = e
			},
			
			voiceChange(e){
				this.is_voice = e
			},
			
			durationChange(e){
				this.duration = e.value
				this.wtransition = 'transform '+this.duration+'s ease'
			},
			
			setting_open_window(){
				this.setting_window_show = true
			},
			setting_window_close(){
				this.setting_window_show = false
			},
			
			
			getRote(){
				for(var i = 0; i<this.list.length;i++){
					let clas = ".word"+i
					this.$nextTick(()=>{
						let dom = uni.createSelectorQuery().select(clas);
						dom.boundingClientRect((data)=> {
							if(Math.abs(data.top-this.top_word)<2){
								if(this.zhuanpan_word!=this.list[data.id].name){
									if(this.is_vibrate){
										uni.vibrateShort({
											success: function () {
												console.log('vibrateLongsuccess');
											}
										});
									}
									this.zhuanpan_word = this.list[data.id].name
								}
							}
							
						}).exec()
					})
				}
			},
			
			
			drawAwardRoundel(){
				let list = []
				let n = this.list.length
				this.jiaodu = 360/n;  // 文字旋转 turn 值  
				for (var i = 0; i < this.list.length; i++) {
					let clip = ''
					if(n==2){
						clip += `polygon(0 0, 50% 0, 50% 100%, 0% 100%)`
					}
					if(n==3){
						let a = 50+50*Math.tan(30*Math.PI/180)
						clip += `polygon(0 0, 50% 0%, 50% 50%, 0 ${a}%)`
					}
					if(n>=4&&n<8){
						let jd = 360/n
						let a =50-50/Math.tan(jd*Math.PI/180)
						clip += `polygon(0 0, 50% 0, 50% 50%, 0 ${a}%)`
					}
					if(n>=8){
						let jd = 360/n
						let a =50-50*Math.tan(jd*Math.PI/180)
						clip += `polygon(${a}% 0, 50% 50%, 50% 0)`
					}
					list.push({
						dim:false,
						clip:clip,
						turn: i * this.jiaodu + 'deg', 
						bgcolor:this.list[i].bgcolor,
						name:this.list[i].name});  
				}
				this.list = list
			},
			play(){
				if(!this.is_run){
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].dim = false
					}
					this.is_run = true
					if(this.top_word==0){
						this.$nextTick(()=>{
							let dom = uni.createSelectorQuery().select(".word0");
							dom.boundingClientRect((data)=> {
								this.top_word = data.top
							}).exec()
						})
					}
					
					var that = this
					this.timer = setInterval(function(){
						that.getRote()
					}, 30);
					
					let n = this.list.length
					var awardIndex = Math.floor(Math.random()*n);//随机数
					console.log('index',awardIndex)
					console.log(this.list[awardIndex])
					var runNum = 8;//旋转8周 
					 this.runDeg = this.runDeg||0
					this.runDeg = this.runDeg + (360 - this.runDeg % 360) + (360 * runNum - awardIndex * (360 / n))  
					setTimeout(function () {
						this.is_run= false;
						clearInterval(this.timer)
						for (var i = 0; i < this.list.length; i++) {
							if(i!=awardIndex){
								this.list[i].dim = true
							}
						}
						if(this.is_voice){
							playSound('/static/music/ding2.mp3')
						}
						setTimeout(function () {
							this.zhuanpan_word = this.list[awardIndex].name
							console.log(this.zhuanpan_word)
						}.bind(this),31)
						
						//保存记录
						this.record_list.unshift(this.zhuanpan_word)
						uni.setStorageSync('zhuanpan_history_list',this.record_list)
						//保存为当前转盘
						uni.setStorageSync('current_zhuanpan',this.zhuanpan)
						
					}.bind(this), this.duration*1000); 
				}
			}
        }  
    }  
</script>
<style>
	
	.sharetxt{font-weight: bold;font-style: italic;padding-right: 17rpx;font-size: 40rpx;}
	.share{width: 550rpx;height: 100%;border: 1px solid #fff;color: #fff;
		border-radius: 50rpx!important;background-color: transparent;}
	.share_box{height: 100rpx;width: 680rpx;}
	
	page{background-color: #333333;}
	.setting_box{justify-content: space-between;width: 650rpx;}
	.setting_btn image{width: 100rpx;}
	.pop_window .li{padding: 20rpx;background-color: #f5f5f5;border-radius: 20rpx;}
	.pop_window .icon{width: 60rpx;}
	.pop_window .right{width: 50%;justify-content: flex-end;}
	.pop_window .left{width: 50%;}
	.pop_window .li_box{margin-bottom: 30rpx;}
	.pop_window{width: 100%;background-color: #ffffff;}
	.dim{ filter: brightness(60%);}
	.award {margin: 20rpx 0;color: aqua;}
	.body {display: flex; justify-content: center;align-items: center;}
	.container {
	  position: relative;
	  width: 700rpx;
	  height: 700rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.container .spinBtn {
	  position: absolute;
	  width: 60px;
	  height: 60px;
	  background: #fff;
	  border-radius: 50%;
	  z-index: 10;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  text-transform: uppercase;
	  font-weight: 600;
	  color: #0066ff;
	  letter-spacing: 0.1em;
	  border: 5rpx solid #0066ff;
	  cursor: pointer;
	  user-select: none;
	}
	
	.container .spinBtn::before {
	  content: '';
	  position: absolute;
	  top: -28px;
	  width: 20px;
	  height: 30px;
	  background: #fff;
	  clip-path: polygon(50% 0%, 15% 100%, 85% 100%);
	}
	
	.container .wheel {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background: #333;
	  border-radius: 50%;
	  overflow: hidden;
	  /* box-shadow: 0 0 0 15rpx #fff; */
	  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 42%);	
	  border: 10rpx solid #fff;
	  box-sizing: border-box;
	  /* transition: transform 5s ease; */
	}
	
	.container .wheel .number {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  justify-content: center;
	}
	
	.container .wheel .number .word {
	  position: relative;
	  font-size: 0.8em;
	  font-weight: 700;
	  color: #fff;
	  text-shadow: 3px 5px 2px rgba(0, 0, 0, 0.15);
	  writing-mode: vertical-lr;
	  margin-top: 40rpx;
	}
	
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		margin: 0;
		padding: 0;
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
	}

</style>